<template>
	<mainHeader title="返回" :haveBack="true" goto="back"></mainHeader>
	<scroll-view scroll-y class="header_scroll">
		<view class="classDetail">
			<view class="theDetail_main" v-if="theOne">
				<view class="theDetail_class base_box_round oneLine" :class="tagClass">
					{{theOne.showOne}}
				</view>
				<ClickShowTextVue :text="String(theOne.addValue)">
					<view class="theDetail_value" :class="tagClass">
						{{moneySymbol}}{{takeBigNumber(theOne.addValue)}}
					</view>
				</ClickShowTextVue>
				<view class="theDetail_time">
					{{theOne.timeValue}}
				</view>
				<view class="theDetail_box base_box">
					<monthMainDataVue :month="theMonth" :tag="[theOne.showOne]" :inOutTag="theOne.showClass" />
				</view>
			</view>
			<view class="index_list_box base_box" v-for="(one,index) in getTheClassData" :key="one">
				<TextOneTitle2Vue :left="dateTypeFormat('mm-dd',new Date(one[0].timeValue))" />
				<view @click="gotoDetail(item)" v-for="(item ,index) in one" :key="item">
					<TextOneLine3Vue :first="item.showOne" :mid="item.notesValue" :end="moneySymbol+item.addValue"
						:tag="item.showClass" />
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script setup>
	import ClickShowTextVue from "@/components/base/ClickShowText.vue"
	import monthMainDataVue from "@/components/monthMainData.vue";
	import mainHeader from '@/components/mainHeader.vue';
	import TextOneTitle2Vue from "@/components/TextOneTitle2.vue";
	import TextOneLine3Vue from "@/components/TextOneLine3.vue";
	import {
		takeClassList,
		takeBigNumber,
		dateTypeFormat,
		handleLoad
	} from "@/uitls/tool.js"
	import {
		ref,
		computed
	} from "vue"
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import store from "@/store/index.js"
	const tagClass = computed(() => theOne.value.showClass == null ? '' : theOne.value.addValue > 0 ? 'incomeColor_' +
		store.state.setting.typeTag : 'expensesColor_' + store.state.setting.typeTag) // 收入支出 颜色样式
	const moneySymbol = computed(() => store.state.setting.MoneySymbol)
	const theMonth = ref()
	const allData = computed(() => store.state.mainData.allData)
	const theMonthClassData = ref()
	const props = defineProps({ // 页面传值
		class: String,
		theMonth: String,
		inOutTag:{//判断是收入还是支出
			type:Boolean,
			default:true,
		}
	})
	onLoad((e) => {
		if (Object.keys(e).length === 0) {
			handleLoad("查看记录出错");
			return;
		}
		theMonth.value = props.theMonth
		if (!Array.isArray(allData.value[theMonth.value])) {
			handleLoad("月份数据不存在");
			return;
		}
		const monthClassData = takeClassList(allData.value[theMonth.value], (item) => {
			return item.showOne === props.class;
		});
		if (monthClassData[true]) {
			theMonthClassData.value = monthClassData[true].filter(item => String(item.showClass) === String(props.inOutTag));
			getTheClassData.value = takeClassList(
				theMonthClassData.value,
				"timeValue"
			);
			getTheOne();
		} else {
			handleLoad("没有找到匹配的数据");
		}
	})
	const theOne = ref()
	const getTheOne = () => {
		let data = theMonthClassData.value
		let AlladdValue = 0
		theMonthClassData.value.forEach((item) => {
			if (item.showClass == 0) AlladdValue -= parseFloat(item.addValue)
			else AlladdValue += parseFloat(item.addValue)
		})
		theOne.value = {
			showOne: data[0].showOne,
			addValue: AlladdValue,
			timeValue: dateTypeFormat("YYYY-mm", new Date(data[0].timeValue)),
			showClass: data[0].showClass
		}
	}
	const getTheClassData = ref()
	const gotoDetail = (x) => {
		let theMonthIndex = allData.value[theMonth.value].indexOf(x)
		uni.navigateTo({
			url: `/subPages/theDetail/theDetail?theMonth=${theMonth.value}&theMonthIndex=${theMonthIndex}`,
			animationType: 'zoom-fade-out',
		})
	}
</script>

<style lang="scss" scoped>
	@import "@/style/base.scss";

	.classDetail {
		display: flex;
		flex-direction: column;
		padding: 1em 0.5em 0.5em 0.5em; // 留下底部

		.theDetail_main {
			display: flex;
			flex-direction: column;
			align-items: center;
			flex-wrap: wrap;

			.theDetail_value {
				margin-top: 0.5em;
				margin-left: -0.5em;
				font-size: $bigFontsize;
			}

			.theDetail_notes {
				.theDetail_notes_box {
					color: $baseBlack_mid;
				}
			}

			.theDetail_time {
				color: $baseBlack_mid;
				font-size: $midFontsize;
				margin: 1em;
			}

			.theDetail_box {
				width: 100%;
				aspect-ratio: 3/2;
			}
		}
	}
</style>